<template>
  <div class="main">
    <!-- 左边内容 -->
    <div class="main-left">
      <!--   搜索框   -->
      <div class="left-one">
        <el-input v-model="treeParams.flname"
                  placeholder="搜索"
                  suffix-icon="el-icon-search"
                  @keyup.enter.native="getList"
                  size="mini">
        </el-input>
      </div>
      <!--   固定类型   -->
      <div class="left-two">
        <div v-if="userLead" class="two-item" @click="handleFl('fbrw', '发布任务', 'iconfont icon-faburenwu')">
          <i class="iconfont icon-faburenwu" style="color: #409EFF"></i> &nbsp;&nbsp;发布任务
        </div>
        <div v-if="userLead" class="two-item" @click="handleFl('syrw', '所有任务', 'iconfont icon-renwuliebiao')">
          <i class="iconfont icon-renwuliebiao" style="color: #67C23A"></i> &nbsp;&nbsp;所有任务
        </div>
        <div v-if="!userLead" class="two-item" @click="handleFl('dbrw', '任务列表', 'iconfont icon-document-record')">
          <i class="iconfont icon-document-record" style="color: #E6A23C"></i> &nbsp;&nbsp; 任务列表
        </div>
        <div v-if="!userLead" class="two-item" @click="handleFl('wdrw', '我的待办', 'iconfont icon-woderenwu')">
          <i class="iconfont icon-woderenwu" style="color: #F56C6C"></i> &nbsp;&nbsp;我的待办
        </div>
        <div v-if="!userLead" class="two-item" @click="handleFl('syrwwy', '所有任务', 'iconfont icon-renwuliebiao')">
          <i class="iconfont icon-renwuliebiao" style="color: #67C23A"></i> &nbsp;&nbsp;所有任务
        </div>
      </div>
      <el-divider><b>分类</b></el-divider>
      <!--   可变类型   -->
      <div class="left-three" @contextmenu.stop.prevent="handleItem($event)">
        <div class="two-item" v-for="(item, index) in flList">
           <span v-if="item.edit">
             <el-input v-model="item.flname" class="input-icon-content" :id="`flInput${index}`"
                       style="width: 100%"
                         @input="changeFlName($event, index)"
                         @blur="addFlName(item, index)"
                         @keyup.enter.native="$event.target.blur()"
             />
          </span>
          <span v-else><i class="iconfont icon-liebiao" style="color: #606266"></i> &nbsp;&nbsp; {{item.flname}}</span>
        </div>
      </div>

      <!--   底部固定   -->
      <div class="left-four">
<!--        <div class="four-one" @click="addFlList"> <i class="el-icon-plus"></i> 新建列表</div>-->
<!--        <div class="four-two"><i class="el-icon-s-tools"></i></div>-->
      </div>
    </div>
    <!-- 右边内容 -->
    <div class="main-right">
      <rwfb v-if="typeInfo.type === 'fbrw'" :typeInfo="typeInfo" :userLead="userLead"></rwfb>
      <syrw v-else-if="typeInfo.type === 'syrw'" :typeInfo="typeInfo" :userLead="userLead"></syrw>
      <dbrw v-else-if="typeInfo.type === 'dbrw'" :typeInfo="typeInfo" :userLead="userLead"></dbrw>
      <wdrw v-else-if="typeInfo.type === 'wdrw'" :typeInfo="typeInfo" :userLead="userLead"></wdrw>
      <syrwwy v-else-if="typeInfo.type === 'syrwwy'" :typeInfo="typeInfo" :userLead="userLead"></syrwwy>
      <div v-else>
        暂无权限
      </div>
    </div>
    <LeftItem ref="leftItem" @handleClick="handleItemClick"></LeftItem>
  </div>
</template>

<script>
import { listTodoFl, getTodoFl, delTodoFl, addTodoFl, updateTodoFl } from "@/api/gd/todoFl";
import LeftItem from '@/views/gd/todo/componse/LeftItem.vue'
import rwfb from '@/views/gd/todo/componse/rwfb/rwfb.vue'
import syrw from '@/views/gd/todo/componse/syrw/syrw.vue'
import dbrw from '@/views/gd/todo/componse/dbrw/dbrw.vue'
import wdrw from '@/views/gd/todo/componse/wdrw/wdrw.vue'
import syrwwy from '@/views/gd/todo/componse/syrwwy/syrwwy.vue'
import { pinyin } from 'pinyin-pro'
export default {
  name: 'index',
  components: { LeftItem, rwfb, syrw, dbrw, wdrw, syrwwy },
  data() {
    return {
      userLead: true,
      // 树形查询条件
      treeParams: {
        flname: ''
      },
      // 待办查询条件
      queryParams: {
        title: ''
      },
      // 分类列表
      flList: [],
      // 固定分类
      typeInfo: {
        title: "",
        type: "",
        icon: ""
      }
    }
  },
  async created() {
    await this.getList()
    await this.$store.getters.roles.forEach(item => {
      if ("wyjs" === item) {
        this.userLead = false
      }else {
        this.userLead = true
      }
    })
    if (this.userLead) {
      this.$set(this.typeInfo, 'title', '发布任务')
      this.$set(this.typeInfo, 'type', 'fbrw')
      this.$set(this.typeInfo, 'icon', 'iconfont icon-faburenwu')
    }else {
      this.$set(this.typeInfo, 'title', '任务列表')
      this.$set(this.typeInfo, 'type', 'dbrw')
      this.$set(this.typeInfo, 'icon', 'iconfont icon-document-record')
    }
  },
  methods: {
    // 查询数据
    getList() {
      // 查询分类数据
      listTodoFl(this.treeParams).then(res => {
        this.flList = res
      })
    },
    // 添加分类列表
    addFlList() {
      let obj = {
        flname: "新建分类",
        flcode: this.getLastZm("新建分类"),
        edit: true
      }
      this.flList.push(obj)
      this.$nextTick(() => {
        let index = this.flList.length - 1
        document.getElementById(`flInput${index}`).focus()
      })
    },
    // 获取字符串首字母小写
    getLastZm(str) {
      const field = pinyin(str, { toneType: 'none', type: 'array' })
      return field.map(py => py[0][0]).join('').toLowerCase()
    },
    // 点击固定分类
    handleFl(type, name, icon) {
      this.$set(this.typeInfo, 'title', name)
      this.$set(this.typeInfo, 'type', type)
      this.$set(this.typeInfo, 'icon', icon)
    },
    // 更新文件夹名称
    changeFlName(val, index) {
      let values = this.getLastZm(val)
      this.$set(this.flList[index], 'flname', val)
      this.$set(this.flList[index], 'filecode', values)
    },
    // 添加类型
    addFlName(item, index) {
      if (item.id !== undefined) {
        updateTodoFl(item).then(res => {
          if (res.code === 200) {
            this.$message.success("修改成功！")
          }
        }).finally(async res => {
          this.$set(this.flList[index], 'edit', false)
          this.getList()
        })
      }else {
        addTodoFl(item).then(res => {
          if (res.code === 200) {
            this.$message.success("创建成功！")
          }
        }).finally(async res => {
          this.$set(this.flList[index], 'edit', false)
          this.getList()
        })
      }
    },
    /**
     * 选项右键菜单
     */
    handleItem(event) {
      event.preventDefault();
      this.$refs.leftItem.show(event);
    },
    /**
     *  处理点击选项
     */
    handleItemClick(type) {
      console.log("type", type)
      // if (this.type === 'shuaxinshumulu') {
      //
      // }
    }
  }
}
</script>

<style scoped>
.main {
  width: 100%;
}
.main-left {
  width: 15%;
  height: 100vh;
  position: fixed;
  border-right: 1px solid #DCDFE6;
  display: flex;
  flex-direction: column;
}
.left-one {
  width: 100%;
  height: 7%;
  padding: 10px;
}
.left-two {
  width: 100%;
  height: 20%;
}
.two-item {
  width: 100%;
  height: 45px;
  line-height: 50px;
  padding: 0px 10px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 15px;
}
.two-item:hover {
  background-color: #EBEEF5;
  color: #409EFF;
}
.left-three {
  width: 100%;
  height: 65%;
  overflow-y: auto;
}
.left-three::-webkit-scrollbar {
  display: none;
}
.left-four {
  width: 100%;
  height: 8%;
  display: flex;
}
.four-one {
  width: 80%;
  height: 54px;
  line-height: 54px;
  padding-left: 10px;
  cursor: pointer;
  border-radius: 5px;
}
.four-one:hover {
  background-color: #EBEEF5;
  color: #409EFF;
}
.four-two {
  width: 20%;
  height: 54px;
  line-height: 54px;
  text-align: center;
  cursor: pointer;
  border-radius: 5px;
}
.four-two:hover {
  background-color: #EBEEF5;
  color: #409EFF;
}
.main-right {
  margin-left: 15%;
  height: 100vh;
  width: 85%;
  position: fixed;
}
</style>
